<template>
	<el-dialog v-model="props.show"  width="550" :show-close="false" @close="close">
		<template #header="{ close }">
			<div class="flex justify-end cursor-pointer" v-if="step === 1 || step===4">
				<el-icon @click="close">
					<CloseBold />
				</el-icon>
			</div>
			<div class="flex justify-start cursor-pointer" v-if="step === 2 || step === 3">
				<el-icon @click="step = 1"><Back /></el-icon>
			</div>
		</template>
		<template #default>
			<div class="mt-10px mb-20px" v-if="step === 1">
				<p class="text-#000000 text-24px font-bold">安全验证要求</p>
				<p class="text-#000000 text-18px mt-10px mb-10px">您需要完成以下验证方可继续。</p>
				<p class="text-#114CEE font-bold text-24px">0/2</p>
				<div class="border-1px border-solid border-#E5E6EB flex justify-between items-center p-20px mt-20px cursor-pointer" @click="step = 2">
					<div class="flex items-center">
						<img src="/transaction/c2c/orderSell/check-app.svg" alt="">
						<p class="ml-10px">
							身份验证器APP
						</p>
					</div>
					<el-icon>
						<ArrowRight />
					</el-icon>
				</div>
				<div class="border-1px border-solid border-#E5E6EB flex justify-between items-center p-20px mt-20px cursor-pointer" @click="step = 3">
					<div class="flex items-center">
						<img src="/transaction/c2c/orderSell/check-eamil.svg" alt="">
						<p class="ml-10px">
							邮箱
						</p>
					</div>
					<el-icon>
						<ArrowRight />
					</el-icon>
				</div>
				<p class="flex items-center justify-center mt-20px text-#114CEE text-18px">安全验证不可用？</p>
			</div>
			<div class="mt-10px mb-20px" v-if="step === 2">
				<p class="text-#000000 text-24px font-bold">请填写验证码</p>
				<p class="text-#000000 text-18px mt-10px mb-10px">输入谷歌/欧神验证码</p>
				<p class="text-#86909C  text-14px">身份验证器APP</p>
				<div class="border-1px border-solid border-#E5E6EB flex justify-between items-center pt-4px pb-4px pl-20px pr-20px mt-20px">
					<div class="flex items-center">
						<el-input type="text"
						input-style="width: 400px;height: 32px;margin-right: 10px;border:0;box-shadow:none" placeholder="请输入" />
					</div>
					<p class="text-#114CEE">粘贴</p>
				</div>
				<div class="mt-40px">
					<el-button type="primary" style="width:100%;padding: 20px;font-size: 18px;" @click="commit">提交</el-button>	
				</div>
				<p class="flex items-center justify-center mt-20px text-#114CEE text-18px">安全验证不可用？</p>
			</div>
			<div class="mt-10px mb-20px" v-if="step === 3">
				<p class="text-#000000 text-24px font-bold">请填写验证码</p>
				<p class="text-#000000 text-18px mt-10px mb-10px">验证码将发送到2319588514@qq.com</p>
				<p class="text-#86909C  text-14px">邮箱验证码</p>
				<div class="border-1px border-solid border-#E5E6EB flex justify-between items-center pt-4px pb-4px pl-20px pr-20px mt-20px">
					<div class="flex items-center">
						<el-input type="text"
						input-style="width: 300px;height: 32px;margin-right: 10px;border:0;box-shadow:none" placeholder="请输入" />
					</div>
					<p class="text-#114CEE">发送验证码</p>
				</div>
				<div class="mt-40px">
					<el-button type="primary" style="width:100%;padding: 20px;font-size: 18px;" @click="commit">提交</el-button>	
				</div>
				<p class="flex items-center justify-center mt-20px text-#114CEE text-18px">无法接收验证码？</p>
			</div>
			<div class="mt-10px mb-20px" v-if="step === 4">
				<div class="flex flex-col items-center mt-30px mb-20px">
					<img src="/transaction/c2c/orderDetail/finish.svg" alt="" class="w-100px h-100px ">
					<p class="text-#86909C text-14px mt-20px mb-20px">购买成功</p>
					<p class="text-#1A1A1A">10.00USDT</p>
				</div>
				<div class="mt-40px">
					<el-button type="primary" style="width:100%;padding: 20px;font-size: 18px;" @click="again">再次下单</el-button>	
				</div>
				
			</div>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>

interface IProps {
	show: boolean;
}

const props = defineProps<IProps>();
const emits = defineEmits(['close','again']);

// 步骤1，选择方式；2，APP验证；3，邮箱验证码验证；4，完成
const step = ref<1 | 2 | 3 | 4>(1);

const close = () => {
	emits('close',false);
}

const again = () => {
	emits('again')
}

const commit = () => {
	step.value = 4;
}
</script>

<style lang="scss" scoped>
	::v-deep .el-input__wrapper,
	::v-deep .el-input__wrapper .el-input__inner{
		// width: 200px;
		border: 0 !important;
		box-shadow: none !important;
	}
</style>
